<ion-header>
    <ion-navbar>
      <ion-title>
        {{Toer.username}}
      </ion-title>
    </ion-navbar>
  </ion-header>
   
  <ion-content>
    <ion-grid>
      <ion-row *ngFor="let message of messages">
        
        <ion-col col-9 *ngIf="message.from !== nickname" class="message" [ngClass]="{'my_message': message.from === nickname, 'other_message': message.from !== nickname}">
          <span class="user_name">{{ message.from }}:</span><br>
          <span>{{ message.msg }}</span>
          <div class="time">{{message.created | date:'dd.MM hh:MM'}}</div>
        </ion-col>
   
        <ion-col offset-3 col-9 *ngIf="message.from === nickname" class="message" [ngClass]="{'my_message': message.from === nickname, 'other_message': message.from !== nickname}">
          <span class="user_name">{{ message.from }}:</span><br>
          <span>{{ message.msg }}</span>
          <div class="time">{{message.created | date:'dd.MM hh:MM'}}</div>
        </ion-col>
   
      </ion-row>
    </ion-grid>
   
  </ion-content>
   
  <ion-footer>
    <ion-toolbar>
      <ion-row class="message_row">
        <ion-col col-9>
          <ion-item no-lines>
            <ion-input type="text" placeholder="Message" [(ngModel)]="message"></ion-input>
          </ion-item>
        </ion-col>
        <ion-col col-3>
          <button ion-button clear color="primary" (click)="sendMessage()" [disabled]="message === ''">
          Send
        </button>
        </ion-col>
      </ion-row>
    </ion-toolbar>
  </ion-footer>